.header {
    height: 80px;
    background-color: #145372;
    color: white;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    display: flex;
    animation-fill-mode: forwards; 
}
@media (max-width: 768px) {
    .header_logo {
        background-color: red;
    }  
}
.top_menu{
   position: fixed;
   transform: translateY(-120%);
   animation-fill-mode: forwards; 
//    display: none;
   width: 100%;
   height: 200px;
   background-color: red;
   z-index: 888;
   top: 80px;
   min-height: 800px;
   :global{
    img{
        width: 100%;
        height: 100%;
    }
   }
}
.header_logo {
   
    display: inline-block;
    flex: 1; 
    // padding-left: 200px;
    :global{
        a{
            display: block;
            height: 100%;
        }
        .logo{
            width: 150px;
            margin-top: 15px;
            // height:50px ;
         }
    }
}
/* :global(.header_logo) {
    color: green;
} */
.header_nav {
    display: flex;
    list-style: none;
    display: flex;
    align-items: center;
    margin: 2px 0;
    height: calc(100% - 4px);
    margin: auto;
    // padding-right: 100px;

    :global{ 
       li:hover,
       .active{
            &:after{
                position: absolute;
                content: ' ';
                background-color: blue;
                width: 50px;
                left: 0;
                right: 0;
                height: 4px;
                border-radius: 5px;
                left:50%;
                bottom: 10px;
                margin:0  0 0 -25px;
                transform: scale(1.2);

            }
        }
        a{
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            color: white;
        }
        li{
            transition: transform 1s ease;

            font-size: 0.8333333333vw;
            position: relative;
            padding: 0 1.0416666667vw;
            color: #fff;
            height: 100%;
        }
    }
}